<template>
  <el-space :size="10">
    <el-icon color="#409efc"><Setting /></el-icon>
    <!-- <el-link :underline="false" type="primary" @click="toLast">转至最新</el-link> -->
    <div v-if="options.length > 0">
      <el-dropdown :disabled="!options.length" trigger="click">
        <el-button type="primary" size="small" plain>
          操作
          <el-icon style="margin-left: 4px">
            <ArrowDown />
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, index) in options"
              :key="index"
              :disabled="item.disabled"
              @click="!item.child && clickHandle(item)"
            >
              <!--有子菜单-->
              <el-dropdown v-if="item.child" placement="right">
                <span style="width: 100%">
                  {{ item.label }}
                  <el-icon style="position: absolute">
                    <ArrowRight />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="(val, i) in item.child"
                      :key="i"
                      @click="clickHandle(val)"
                    >
                      {{ val.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <!--无子菜单-->
              <template v-else>
                {{ item.label }}
              </template>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <h3>
      {{ route.query.title }}
      <!-- <el-tag
        v-if="info.status"
        :type="((commonStore.checkStatus === '已检入' || info.status === '已检入') && 'info') || ''"
        style="margin-left: 10px"
      >
        {{ info.status }}
      </el-tag> -->
    </h3>
  </el-space>
</template>

<script setup name="operateButton">
const { options } = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
});
const route = useRoute();
let processType = ref('');
const emit = defineEmits(['clickHandle']);
const clickHandle = (item) => {
  processType.value = item.label;
  emit('clickHandle', item);
};
const toLast = () => {
  emit('clickHandle', { label: '转至最新', processType: '转至最新' });
};
</script>

<style scoped lang="less">
.el-space {
  margin-bottom: 8px;
}
.el-dropdown {
  flex: 1;
  :deep .el-button-group > .el-button:last-child {
    background-color: var(--el-color-primary-light-9);
  }
}
h3 {
  color: var(--el-text-color-regular);
}
</style>
